<template>
    <div class="home">
      <div class="stat-charts">
        <div class="chart">
          <div class="chart-title">住院记录统计</div>
          <div ref="inpatientChart" class="chart-container"></div>
        </div>
  
        <div class="chart">
          <div class="chart-title">门诊记录统计</div>
          <div ref="outpatientChart" class="chart-container"></div>
        </div>
  
        <div class="chart">
          <div class="chart-title">预约记录统计</div>
          <div ref="appointmentChart" class="chart-container"></div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import * as echarts from 'echarts'
  
  const inpatientData = {
    labels: ['2021', '2022', '2023'],
    data: [100, 200, 300]
  }
  
  const outpatientData = {
    labels: ['2021', '2022', '2023'],
    data: [150, 180, 210]
  }
  
  const appointmentData = {
    labels: ['2021', '2022', '2023'],
    data: [250, 300, 350]
  }
  
  const inpatientChart = ref(null)
  const outpatientChart = ref(null)
  const appointmentChart = ref(null)
  
  onMounted(() => {
    const inpatientInstance = echarts.init(inpatientChart.value)
    const outpatientInstance = echarts.init(outpatientChart.value)
    const appointmentInstance = echarts.init(appointmentChart.value)
  
    const inpatientOption = {
      title: { text: '住院记录统计' },
      tooltip: {},
      xAxis: { type: 'category', data: inpatientData.labels },
      yAxis: { type: 'value' },
      series: [{ data: inpatientData.data, type: 'line' }]
    }
    inpatientInstance.setOption(inpatientOption)
  
    const outpatientOption = {
      title: { text: '门诊记录统计' },
      tooltip: {},
      xAxis: { type: 'category', data: outpatientData.labels },
      yAxis: { type: 'value' },
      series: [{ data: outpatientData.data, type: 'bar' }]
    }
    outpatientInstance.setOption(outpatientOption)
  
    const appointmentOption = {
      title: { text: '预约记录统计' },
      tooltip: {},
      xAxis: { type: 'category', data: appointmentData.labels },
      yAxis: { type: 'value' },
      series: [{ data: appointmentData.data, type: 'bar' }]
    }
    appointmentInstance.setOption(appointmentOption)
  })
  </script>
  
  <style scoped lang="scss">
  .home {
    padding: 20px;
  
    .stat-charts {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
  
      .chart {
        width: 30%;
        margin-bottom: 20px;
  
        .chart-title {
          font-size: 18px;
          margin-bottom: 10px;
          text-align: center;
        }
  
        .chart-container {
          height: 300px;
        }
      }
    }
  }
  </style>
  